<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="banner in banners" :key="banner.id">
				<image :src="banner.picUrl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 宫格导航 -->
		<uni-grid :column="3">
			<uni-grid-item v-for="cate in cates" :key="cate.id">
				<view class="grid">
					<image :src="cate.icon" mode="aspectFill"></image>
					<text>{{cate.name}}</text>
				</view>
			</uni-grid-item>
			
		</uni-grid>
		<!-- /宫格导航 -->
		<!-- 商品列表 -->
		<view class="item" v-for="item in items" :key="item.id" @tap="enterDetail(item.id)">
			<image :src="item.pic" mode="aspectFill"></image>
			<view class="">
				{{item.name}}
			</view>
		</view>
		<view class="">
			{{finished?'--我也是有底线的--': '加载中...'}}
		</view>
		<!-- /商品列表 -->
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				banners: [],
				cates: [],
				page: 1,
				isLoading: false,
				finished: false,
				items: []
			}
		},
		methods: {
			enterDetail(id){
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},
			fetchBanners(){
				this.$http('/banner/list').then(res => {
					if (res.data.code === 0) {
						this.banners = res.data.data
					}
				})
			},
			fetchCates(){
				this.$http('/shop/goods/category/all', {
					data: {
						a: 10,
						b: 30
					}
				}).then(res => {
					if (res.data.code === 0){
						this.cates = res.data.data
					}
				})
			},
			
			fetchItems(){
				this.loading = true
				this.$http('/shop/goods/list/v2', {
					method: 'POST',
					data: {
						page: this.page,
						pageSize: 5
					}
				}).then(res => {
					uni.stopPullDownRefresh()
					this.loading = false;
					if (res.data.code === 0) {
						this.items = [
							...this.items,
							...res.data.data.result
						]
					}
					if(res.data.code === 700) {
						this.finished = true;
					}
				})
			}
		},
		onLoad(){
			this.fetchCates()
			this.fetchBanners()
			this.fetchItems()
		},
		onPullDownRefresh(){
			// 初始化
			this.items = [];
			this.page = 1;
			this.finished = false;
			this.fetchItems();
		},
		onReachBottom(){
			if (this.isLoading || this.finished) {
				return ;
			}
			this.page++;
			this.fetchItems();
		}
	}
</script>

<style lang="scss" scoped>
.swiper{
	width: 750rpx;
	height:375rpx;
	image{
		width: 750rpx;
		height:375rpx;
	}
}
.grid{
	width: 100%;
	height: 100%;
	display:flex;
	flex-direction: column;
	align-items: center;
	text{
		font-size: 14px;
	}
	image{
		width: 60px;
		height: 60px;
	}
}
</style>
